<template>
  <!-- 这是查看详情页面 -->
  <div class="store-content item">
    <div class="item-box">
      <div class="gallery-wrapper">
        <div class="gallery">
          <div class="thumb">
            <ul>
              <li class="on">
                <img :src="productObj.ali_image" style="width:100%"/>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="banner">
        <div class="sku-custom-title">
          <div class="params-price">
            <span>
              <em>¥</em>
              <i>{{productObj.price}}</i>
            </span>
          </div>
          <div class="params-info">
            <h4>{{productObj.title}}</h4>
            <h6>{{productObj.sub_title}}</h6>
          </div>
        </div>
        <div class="sku-dynamic-params-panel">
          <div class="sku-dynamic-params clear">
            <span class="params-name">颜色</span>
            <ul class="params-colors">
              <li 
              :class="{'cur':currentIdx==i}" v-for="(color,i) in productObj.spec_json" 
              :key="color.spec_value_id"
              @click="changeColor(i,color.spec_value_id)">
                <a>
                  <i>
                    <img :src="color.image"/>
                  </i>
                </a>
              </li>
            </ul>
          </div>
          <div class="sku-dynamic-params clear">
            <div class="params-name">数量</div>
            <div class="params-detail clear">
              <div class="item-num js-select-quantity">
                <span :class="['down',count<=1?'down-disabled':false]"
                @click="reduceCount">-</span>
                <span class="num">{{count}}</span>
                <span :class="{'up':true ,'up-disabled':count>=productObj.limit_num}"
                  @click="addCount">+</span>
              </div>
            </div>
          </div>
        </div>
        <div class="sku-status">
          <div class="cart-operation-wrapper clearfix">
            <span class="blue-title-btn js-add-cart">
              <a @click="addCart({productObj,count})">加入购物车</a>
            </span>
            <span class="gray-title-btn">
              <a @click.prevent="gotoCart">现在购买</a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  data(){
    return {
      //用来存放所有商品数据
      goodsList:[],
      //设置一个产品列表用来存当前应该渲染的产品
      productObj:{},
      //初始化id
      id:this.$route.query.productid,
      //设置当前商品的数量(初始值)
      count:1
    }
  },
  //用watch监测想要的产品对象
  watch:{
    $route:{
        handler(to){
          console.log(to,"11111");
          //把当前所有数据的数组进行查找  根据当前的productid去找到对应的商品 赋值给productObj
          this.productObj=this.goodsList.find(item=>item.sku_id==to.query.productid)
      }
    }
    
  },
  computed:{
    //计算属性 设置索引来切换颜色
    currentIdx:{
      get(){
        return this.productObj.spec_json.findIndex(item=>item.spec_value_id==this.productObj.color_id)
      },
      set(){

      }
      
    }
  },
  async created(){
    let res=await fetch("data/itemData.json");
    let data=await res.json();
    console.log(data);
    this.goodsList=data;
    //存储当前跟路由id一样的数据
    this.productObj=data.find(item=>item.sku_id==this.id)
    console.log(this.productObj,"lalala");
  },
  methods:{
    //点击加入购物车 映射过来
    ...mapMutations(['addCart']),
    // //点击数量减
    reduceCount(){
      if(this.count>1){
        this.count=this.count-1;
      }
    },
    //点击数量加
    addCount(){
      if(this.count<this.productObj.limit_num){
        this.count=this.count+1;
      }
    },
    //点击改变颜色
    changeColor(i,id){
      //第一步：把索引值赋给currentIdx
      this.currentIdx=i;
      //第二步：根据当前的color_id去找到对应的商品
      this.productObj=this.goodsList.find(item=>item.color_id==id);
      //第三步：更改当前的地址和查询参数
      this.$router.push({'name':"productdetail",'query':{'productid':this.productObj.sku_id}})
      //第四步:每次更改颜色 都让count变回1
      this.count=1;
    },
    //点击现在购买去cart组件页
    gotoCart(){
      //将商品信息和数量传过去购物车
      this.$store.commit('addCart',{
        productObj:this.productObj,
        count:this.count
      })
      // 跳转过去购物车主页面
      this.$router.push({name:"cart"});
    }
  }
};
</script>

<style>
</style>